<!-- 
    webrtc
    http://192.168.20.149:5175/webrtc?rtspUrl=rtsp://admin:hk12345678@192.168.10.220:554/Streaming/Channels/101
 -->
<template>
    <div class="video-box">
        <video id="video" autoplay width="900" height="900"></video>
    </div>
</template>
   
<script>
export default {
    name: 'index1',
    data() {
        return {
            webRtcServer: null
        }
    },
    mounted() {
        //video：需要绑定的video控件ID
        //127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
        console.log('location:', location.protocol)
        this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//192.168.20.149:10011')
        //需要查看的rtsp地址
        this.webRtcServer.connect('rtsp://admin:hk12345678@192.168.10.212:554/Streaming/Channels/101')
    },
    beforeDestroy() {
        this.webRtcServer.disconnect()
        this.webRtcServer = null
    },
    methods: {
    }
}
</script>
   
<style scoped>
.video-box {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999;
    background-color: black;
  }
  video {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
</style>